<template>
    <div class="from">
        <div class="from_table">
            <el-form-item label="优惠券类型：">
                <el-select v-model.number="form.type">
                    <el-option label="全场赠券" value="0" />
                    <el-option label="会员赠券" value="1" />
                    <el-option label="购物赠券" value="2" />
                    <el-option label="注册赠券" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="优惠券名称：">
                <el-input type="text" v-model="form.name">

                </el-input>
            </el-form-item>
            <el-form-item label=" 使用平台：">
                <el-select v-model.number="form.platform">
                    <el-option label="全平台" value="0" />
                    <el-option label="移动平台" value="1" />
                    <el-option label="PC平台" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="发行总量：">
                <el-input v-model.number="form.publishCount" type="text" placeholder="只能输入正整数">

                </el-input>
            </el-form-item>
            <el-form-item label=" 面额：">
                <el-input v-model.number="form.amount" type="text" placeholder="面值只能是数值，限两位小数">
                    <template #append>元</template>
                </el-input>
            </el-form-item>

            <el-form-item label=" 每人限额：">
                <el-input v-model.number="form.perLimit" type="text" placeholder="只能输入正整数">
                    <template #append>张</template>
                </el-input>
            </el-form-item>


            <el-form-item label=" 使用门槛：">
                <el-input v-model.number="form.minPoint" type="text" placeholder="只能输入正整数">
                    <template #prepend>满</template>
                    <template #append>元可用</template>
                </el-input>
            </el-form-item>

            <el-form-item label="领取日期：">
                <el-date-picker value-format="YYYY-MM-DDTHH:mm:ss:sssZ" v-model="form.startTime" type="date"
                    placeholder="选择日期" :size="size" />
            </el-form-item>


            <el-form-item label="有效期：">
                <el-date-picker value-format="YYYY-MM-DDTHH:mm:ss:sssZ" v-model="form.enableTime" type="date"
                    placeholder="选择日期" :size="size" />
                至
                <el-date-picker value-format="YYYY-MM-DDTHH:mm:ss:sssZ" v-model="form.endTime" type="date"
                    placeholder="选择日期" :size="size" />
            </el-form-item>



            <el-form-item label="可使用商品：">

                <el-button-group>
                    <el-button :type="ifshow === 1 ? 'primary' : ''" @click="ifshow = 1">全场通用</el-button>
                    <el-button :type="ifshow === 2 ? 'primary' : ''" @click="ifshow = 2">指定分类</el-button>
                    <el-button :type="ifshow === 3 ? 'primary' : ''" @click="ifshow = 3">指定商品</el-button>
                </el-button-group>
            </el-form-item>

            <el-form-item style="margin-left:80px;">
                <div class="tanxin" style="margin-bottom:20px ;">
                    <div v-show="ifshow == 2 ? true : false">
                        <el-cascader v-model="value" :options="options" @change="handleChange" clearable />
                    </div>

                    <div v-show="ifshow == 3 ? true : false">
                        <el-autocomplete v-model="state" :fetch-suggestions="querySearch" placeholder="商品名称/商品货号"
                            @select="handleSelect">
                            <template #default="{ item }">
                                <div class="value tanxin">
                                    <span>{{ item.value }}</span>
                                    <span style="font-size: 12px;color:#ccc">NO.{{ item.link }}</span>
                                </div>
                            </template>
                        </el-autocomplete>
                    </div>

                    <el-button v-show="ifshow !== 1 ? true : false" @click="ontianjia">添加</el-button>
                </div>

                <el-table v-show="ifshow === 2 ? true : false" :data="form.productCategoryRelationList" style="width: 90%"
                    border>
                    <el-table-column label="商品名称" align="center">
                        <template #default="scope">
                            <span v-show="scope.row.parentCategoryName">{{ scope.row.parentCategoryName + '>' }}</span>
                            {{ scope.row.productCategoryName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="90px" align="center">
                        <template #default="scope">
                            <a @click="shangpdelet(scope.row)">删除</a>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-show="ifshow === 3 ? true : false" :data="form.productRelationList" style="width: 90%" border>
                    <el-table-column prop="productName" label="分类名称" align="center" />
                    <el-table-column label="货号" width="90px" align="center">
                        <template #default="scope">
                            NO.{{ scope.row.productSn }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="90px" align="center">
                        <template #default="scope">
                            <a @click="huohaodeldt(scope.row)">删除</a>
                        </template>
                    </el-table-column>
                </el-table>


            </el-form-item>

            <el-form-item label="备注：">
                <el-input v-model="form.note" type="textarea" placeholder="请输入类容" />
            </el-form-item>


            <el-button @click="tijiaoClick">提交</el-button>
            <el-button>重置</el-button>


        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import type { Ref } from 'vue'
import * as api from '../../request/api'
import type { ICouponCreateData } from '../../request/DYBApi/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
let router = useRouter()
// 控制 1 全场通用   2 指定分类  3 指定商品
let ifshow = ref<1 | 2 | 3>(1)
// form表单  
let form = ref<any>({
    // 优惠券类型
    type: '0',
    // 优惠券名称
    name: '',
    // 发行总量
    publishCount: 0,
    // 面额
    amount: 1,
    // 结束时间
    endTime: '',
    // 领取时间
    startTime: '',
    // 开始时间
    enableTime: '',
    // 每人限领
    perLimit: '0',
    // 使用门槛
    minPoint: 0,
    // 备注
    note: '',
    // 使用平台
    platform: 0,
    // 练级选择
    productCategoryRelationList: [
        //     {
        //     parentCategoryName: "",
        //     productCategoryId: 139,
        //     productCategoryName: ''
        // }
    ],
    productRelationList: [
        //     {
        //     productId: 1318,
        //     productName: "11",
        //     productSn: "",
        // }
    ],
    useType: 2

})
// 搜索框值
const state = ref('')
// 搜索 弹出值
const links = ref<any[]>([])
const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    cb(results)
}
const createFilter = (queryString: string) => {
    return (restaurant: any) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
let lingshishuju = ref()
// 指定商品表格数据
let tablelist = ref<any[]>([])
const handleSelect = (item: any) => {
    lingshishuju.value = ''
    lingshishuju.value = item

}
// 添加按钮
let ontianjia = () => {
    if (ifshow.value == 2) {
        options.value.forEach((item: any) => {
            if (item.value == value.value[0]) {
                if (item.children) {
                    item.children.forEach((cit: any) => {
                        if (cit.value == value.value[1]) {
                            let obj = {
                                productCategoryId: cit.id,
                                productCategoryName: cit.name,
                                parentCategoryName: item.value
                            }
                            return form.value.productCategoryRelationList?.push(obj)
                        }
                    })

                    if (value.value.length == 1) {
                        let objj = {
                            productCategoryId: item.id,
                            productCategoryName: item.name,
                            parentCategoryName: item.values
                        }
                        form.value.productCategoryRelationList?.push(objj)
                    }
                }
            }
        })

    } else if (ifshow.value == 3) {
        let obj = {
            productId: lingshishuju.value.id,
            productName: lingshishuju.value.name,
            productSn: lingshishuju.value.productSn,
        }
        console.log(form.productRelationList);
        form.value.productRelationList?.push(obj)
    }
}
watch(state, async () => {
    // 监听 指定商品搜索
    let arr = await api.yxadmin.getProductSimpleList({ keyword: state.value })
    arr.forEach((item: any) => {
        item.value = item.subTitle
        item.link = item.productSn
    })
    links.value = arr

})


const options = ref()
const size = ref<'default' | 'large' | 'small'>('default')
// 查询所有一级分类及子分类
let getwath = async () => {
    options.value = await api.yxadmin.GetwithChildren()
    options.value.forEach((el: any) => {
        if (el.children) {

            el.children.forEach((it: any) => {
                it.value = it.name
                it.label = it.name
            })
        }

        el.value = el.name
        el.label = el.name
        if (el.children.length == 0) {
            el.disabled = true
        }
    });
}
getwath()
// 分类 框值
const value = ref([])
// 点击一级分类及子分类
const handleChange = (value1: any) => {
}

let ids = ref<number>(Number(useRoute().query.id))

// postcouponCreate
// 提交按钮
let tijiaoClick = async () => {
    form.value.id = Number(ids.value)
    form.value.type = Number(form.value.type)
    form.value.platform = Number(form.value.platform)
    let fhz = await api.yxadmin.postcouponCreate(form)

    if (fhz == 1) {
        router.push('/sms/coupon')
        ElMessage({
            type: 'info',
            message: '添加成功',
        })
    } else {
        ElMessage({
            type: 'success',
            message: '添加失败',
        })
    }
}



// 通过query传入的id拿到具体数据
let onIds = async () => {
    form.value = await api.yxadmin.GetCoupon({ id: ids.value }) as ICouponCreateData
    form.value.type = String(form.value.type)
    form.value.platform = String(form.value.platform)

}
onIds()
// 商品的删除
let shangpdelet = (row: any) => {
    form.productCategoryRelationList.forEach((item: any, index: number) => {
        if (item.productCategoryId == row.productCategoryId) {
            form.productCategoryRelationList.splice(index, 1)
        }
    })
}
// 货号删除
let huohaodeldt = (row: any) => {
    form.productRelationList.forEach((item: any, index: number) => {
        if (item.productId == row.productId) {
            form.productRelationList.splice(index, 1)
        }
    })
}
</script>

<style scoped lang="scss">
.from {
    margin: 20px 140px;
    border: 1px solid #eee;
    padding: 35px;
    box-sizing: border-box;

    .from_table {
        padding: 20px;
        width: 680px;
        box-sizing: border-box;
    }
}
</style>